<template>
    <div class="relative w-full">
        <flat-pickr
            class="w-full px-2 py-1 font-medium text-gray-600 form-input pl-9 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100"
            :config="config" v-model="dateValue"></flat-pickr>
        <div class="absolute inset-0 right-auto flex items-center pointer-events-none">
            <svg class="ml-3 text-gray-400 fill-current dark:text-gray-500" width="16" height="16" viewBox="0 0 16 16">
                <path d="M5 4a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z" />
                <path
                    d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4ZM2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Z" />
            </svg>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/l10n/zh.js'
import type { Options } from 'flatpickr/dist/types/options'

interface Props {
    align?: string
    mode?: 'single' | 'range'
    defaultDate?: Date | Date[] | string | number | null
    modelValue?: Date | Date[] | string | number | null
}

const props = withDefaults(defineProps<Props>(), {
    align: '',
    mode: 'range',
    defaultDate: null,
    modelValue: null
})

const emit = defineEmits<{
    (e: 'update:modelValue', value: Date | Date[] | string | number | null): void
    (e: 'change', selectedDates: Date[]): void
}>()

const dateValue = ref<Date | Date[] | string | number | null>(props.modelValue ?? null)

watch(() => props.modelValue, (newVal) => {
    dateValue.value = newVal
})

watch(dateValue, (newVal) => {
    emit('update:modelValue', newVal)
})

const config = computed(() => {
    const defaultDate = getDefaultDate()

    return {
        mode: props.mode,
        static: false,
        appendTo: document.body,
        monthSelectorType: 'static',
        dateFormat: 'Y-m-d',
        locale: 'zh',
        defaultDate: props.modelValue || null,
        enableTime: false, // 禁用时间选择
        timeZone: 'UTC', // 使用 UTC 时区
        prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
        nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
        onReady: (selectedDates: Date[], dateStr: string, instance: any) => {
            if (props.mode === 'range') {
                instance.element.value = dateStr.replace(' to ', ' 至 ')
            }
            const customClass = props.align ? props.align : ''
            instance.calendarContainer.classList.add(`flatpickr-${customClass}`)
            instance.calendarContainer.style.zIndex = '9999'
        },
        onChange: (selectedDates: Date[], dateStr: string, instance: any) => {
            if (props.mode === 'range') {
                instance.element.value = dateStr.replace(' to ', ' 至 ')
            }
            emit('change', selectedDates)
        },
    } as Options
})

function getDefaultDate(): Date | Date[] | string | number | null {  // 返回类型改为包含 null
    if (props.defaultDate !== undefined && props.defaultDate !== null) {
        return props.defaultDate
    }

    if (props.mode === 'range') {
        // 返回 Date 对象数组
        return [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()]
    } else {
        return new Date()
    }
}
</script>


<!-- Range mode (default) -->
<!-- <Datepicker /> -->

<!-- Single date mode -->
<!-- <Datepicker mode="single" /> -->

<!-- With custom default date -->
<!-- <Datepicker mode="single" :defaultDate="new Date('2023-01-01')" /> -->

<!-- With range default dates -->
<!-- <Datepicker :defaultDate="[new Date('2023-01-01'), new Date('2023-01-07')]" /> -->